Sie sind hier: Wissen

Was ist Svelte ?

Svelte [https://svelte.dev] ist ein JavaScript-Framework zur Erstellung von modernen Web- und Cross-Platform-Oberflächen mit HTML und CSS. Das englische Wort svelte heißt auf Deutsch übersetzt schlank, aber auch anmutig.

Svelte bietet Basisfunktionen für Single-Page-Web-Applications wie Komponentenbildung, Templates mit Datenbindung, Formulare und Ereignisse. mitgelieferte Module kann man eine Zustandsverwaltung (svelte/store und svelte/motion), Animationen und Transitionen (svelte/transition und svelte/animate sowie svelte/easing) einbauen.

Die erste Version von Svelte wurde von Rich Harris bereits am 29. November 2016 veröffentlicht, nachdem Harris zuvor am Projekt Ractive.js [https://github.com/ractivejs/ractive] gearbeitet hat, welches sowohl Svelte als auch Vue.js beeinflusst hat. Die zweite Version von Svelte folgte am 19. April 2018. Erst seit der Version 3, die am 21. April 2019 erschienen ist, findet Svelte große Beachtung in der Entwicklergemeinde, denn erst mit dieser Version wurde ein innovatives Konzept für die Reaktivität eingeführt (dazu später mehr). Zudem wird erst seit Version 3 TypeScript verwendet. Eine vierte Hauptversion von Svelte soll 2023 erscheinen [https://github.com/sveltejs/svelte/milestone/6].

Ergänzend zu Svelte gibt es vom gleichen Entwicklungsteam seit dem 14. Dezember 2022 [https://svelte.dev/blog/announcing-sveltekit-1.0] die Version 1.0 von SvelteKit [https://kit.svelte.dev]. SvelteKit ist ein Anwendungsframework auf Basis von Svelte, dass ergänzend Funktionen wie Routing, Server-Side-Pre-Rendering und Static-Side-Generation bietet. SvelteKit wird Thema des zweiten Teils dieser Mini-Serie sein, die in der nächsten Ausgabe von windows developer erscheinen wird.

Sehr gute Performance

Im Gegensatz zu Frameworks wie Angular, React oder Vue.js nutzen Svelte 3-basierte Anwendungen zur Laufzeit der Webanwendung keine frameworkspezifischen Module. Der gesamte Programmcode wird zur Übersetzungszeit vom Svelte-Compiler in reinen JavaScript-Code übersetzt, sodass der Code von keinen externen Programmbibliotheken mehr abhängig ist. Das Counter-Beispiel in der Projektvorlage führt gerade mal zu rund 5500 Zeichen JavaScript-Code.

Zudem gibt es bei Svelte kein Virtual Document Object Model (Virtual DOM oder auch VDOM). Das Virtual DOM ist ein Konzept vieler moderner Webfrontendframeworks (z.B. React und Vue.js sowie Blazor) bei dem Änderungen in der durch Templates gerenderten Oberfläche zunächst in einem JavaScript-Objektmodell zwischengespeichert werden. Erst wenn der Bedarf besteht, eine aktuelle Oberfläche anzuzeigen, werden die Änderungen auf das echte Document Object Model (DOM) übertragen werden. Dies reduziert die Anzahl der Operationen, die auf das tatsächliche DOM ausgeführt werden müssen, und verbessert dadurch die Leistung der Anwendung.

Allerdings führt der ständige Abgleich zwischen Virtual DOM und DOM auch zu einem gehörigen Rechenaufwand. Svelte-Anwendungen greifen direkt auf das echte Document Object Model (DOM) zu. Diese Strategie wird auch von anderen Webframeworks wie SolidJS [https://www.solidjs.com] verwendet.

Die Übersetzung zu JavaScript und der Verzicht auf das Virtual DOM führen dazu, dass Svelte-Anwendungen beim Anwendungsstart nicht viel in den Browser laden müssen und dann sehr performant ausgeführt werden.

Svelte hatte in Version 2 noch den dieses Konzept gut erklärenden Werbeslogan 'The magical disappearing UI framework'. Seit Version 3 verwendet man etwas hochtrabend den Werbeslogan 'Cybernetically enhanced web apps'.

Einige Autoren, z.B. bei Heise [https://www.heise.de/select/ix/2020/13/2009315441946702909] bezeichnen Svelte als einen "JavaScript-Compiler". Der Ausdruck "JavaScript-Compiler" ist aber unnötig irreführend, denn er suggeriert, dass Svelte ein Ersatz für TypeScript wäre, also eine Programmiersprache, die nach JavaScript übersetzt wird. Das ist aber Svelte ganz und gar nicht: Svelte programmiert man mit TypeScript (oder JavaScript, wenn man denn es unbedingt will), lediglich die Abhängigkeit von einer Runtime wird durch das Kompilieren in Svelte entfernt.

Beratung & Support

Schulungen zu diesem Thema

 Svelte
 Single-Page-Web-Applications (SPAs) entwickeln mit HTML5/CSS3 und JavaScript (oder TypeScript)
 JavaScript/ECMAScript zur Browserprogrammierung - Basiswissen (Grundlagen für Einsteiger)
 Umstieg von ASP.NET auf moderne Webtechniken (Single-Page-Web-Applications mit HTML, CSS, JavaScript/TypeScript, Angular, Vue.js, React u.a.)
 JavaScript und TypeScript für die moderne Web- und App-Entwicklung
 Prototyp-Workshop: Eine moderne Webanwendung mit HTML5, CSS und JavaScript (oder TypeScript)
 Progressive Web Apps (PWA)
 AJAX (Asynchronous JavaScript and XML) - Basistechnik für moderne Webanwendungen (Rich Internet Applications)
 Geschäftsanwendungen mit HTML 5.x und JavaScript (oder TypeScript): Moderne Web 2.0-/HTML5-Browser-Webanwendungen und Mobilanwendungen entwickeln
 Webanwendungsarchitektur und Einführung in die aktuellen Web-Technologien (Moderne Webanwendungen, mobile Webanwendungen)
 JavaScript und moderne Webanwendungen/Cross-Platform-Anwendungen für Entscheider
 Web-Frameworks (JavaScript- und TypeScript-Bibliotheken) im Überblick und Vergleich
 Web-Benutzeroberflächentests (UI-Tests/Web-Tests) und Komponententests mit Cypress
 Moderne Web-Anwendungen mit ASP.NET (Core) MVC, WebAPI, HTML5.x/CSS3 und JavaScript-/TypeScript-Frameworks
 ASP.NET Core 8.0/9.0: komplettes Wissen - mit MVC, Razor Pages, Blazor, WebAPIs und gRPC
 Umstieg von .NET-Desktop-Entwicklung (WPF/Windows Forms) auf Webentwicklung (ASP.NET/ASP.NET Core + JavaScript/TypeScript mit Webframeworks wie Angular, Vue.js oder React)
 Web-Benutzeroberflächentests (UI-Tests/Web-Tests) und Komponententests mit Playwright
 Web Components (wiederverwendbare HTML5-Komponenten)
 JavaScript/ECMAScript zur Browserprogrammierung - Aufbauwissen
 GraphQL
 Anfrage für eine individuelle Schulung zum Thema Svelte  Gesamter Schulungsthemenkatalog

Bücher zu diesem Thema

  Blazor 9.0: Moderne Webanwendungen und hybride Cross-Platform-Apps mit .NET 9.0, C# 13.0 und Visual Studio 2022
  C# 13.0 Crashkurs
  Cross-Plattform-Apps mit .NET MAUI entwickeln
  Moderne Datenzugriffslösungen mit Entity Framework Core 9.0
  .NET 9.0 Update: Die Neuerungen in .NET 9.0 gegenüber .NET 8.0
  PowerShell 7 und Windows PowerShell 5 – das Praxishandbuch
  .NET 8.0 Update: Die Neuerungen in .NET 8.0 gegenüber .NET 7.0
  Concurrency with Modern C++: What every professional C++ programmer should know about concurrency
  C++20: Get the Details
  Blazor 8.0: Moderne Webanwendungen und hybride Cross-Platform-Apps mit .NET 8.0, C# 12.0 und Visual Studio 2022
  Moderne Datenzugriffslösungen mit Entity Framework Core 8.0
  C# 12.0 Crashkurs
  App-Entwicklung für Mobile und Desktop: Software Engineering mit .NET MAUI und Comet für iOS, Android, Windows und macOS
  Cross-Plattform-Apps mit .NET MAUI entwickeln
  Blazor 7.0: Blazor WebAssembly, Blazor Server und Blazor Hybrid
  C# 11.0 Crashkurs
  Moderne Datenzugriffslösungen mit Entity Framework Core 7.0
  PowerShell 7 und Windows PowerShell 5 – das Praxishandbuch
  C++ Core Guidelines Explained: Best Practices for Modern C++
  App Engineering: SwiftUI, Jetpack Compose, .NET MAUI und Flutter
  Vue.js 3 Crashkurs
  Moderne Datenzugriffslösungen mit Entity Framework Core 6.0
  Blazor 6.0: Blazor WebAssembly, Blazor Server und Blazor Desktop
  C# 10.0 Crashkurs
  Cross-Plattform-Apps mit Xamarin.Forms entwickeln
  Developing Web Components with TypeScript: Native Web Development Using Thin Libraries
  PowerShell – kurz & gut
  C# 9.0 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET 5.0, .NET Core und Xamarin
  ASP.NET Core Blazor 5.0: Blazor WebAssembly und Blazor Server - Moderne Single-Page-Web-Applications
  Windows PowerShell 5 und PowerShell 7: Das Praxisbuch
  Moderne Datenzugriffslösungen mit Entity Framework Core 5.0
  ASP.NET Core Blazor 3.1/3.2: Blazor Server und Blazor Webassembly - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio
  ASP.NET Core Blazor 3.0/3.1: Blazor Server und Blazor Webassembly - Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio
  Moderne Datenzugriffslösungen mit Entity Framework Core 3.1
  C# 8.0 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin
  Moderne Datenzugriffslösungen mit Entity Framework Core 3.0
  Windows PowerShell 5.1 und PowerShell Core 6.1 - Das Praxishandbuch
  Moderne Datenzugriffslösungen mit Entity Framework Core 2.1/2.2
  Moderne Webanwendungen für .NET-Entwickler: Server-Anwendungen, Web APIs, SPAs & HTML-Cross-Platform-Anwendungen mit ASP.NET, ASP.NET Core, JavaScript
  C# 7.3 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin
  Modern Data Access with Entity Framework Core: Database Programming Using .NET, .NET Core, UWP, and Xamarin with C#
  Modernes C++: Concurrency meistern
  Windows PowerShell und PowerShell Core - Der schnelle Einstieg: Skriptbasierte Systemadministration für Windows, Linux und macOS
  Programmierung in Python
  C# 7.2 Crashkurs: Die Syntax der Programmiersprache C# für die Softwareentwicklung in .NET Framework, .NET Core und Xamarin
  Moderne Datenzugriffslösungen mit Entity Framework Core 2.0/2.1
  Effizienter Datenzugriff mit Entity Framework Core: Datenbankprogrammierung mit C# für .NET Framework, .NET Core und Xamarin
  Moderne Datenzugriffslösungen mit Entity Framework Core 2.0
  Windows PowerShell 5 und PowerShell Core 6 - Das Praxishandbuch
  Angular - Das Praxisbuch zu Grundlagen und Best Practices
  Moderne Datenzugriffslösungen mit Entity Framework Core 1.0, 1,1 und 2.0
  Moderne Datenzugriffslösungen mit Entity Framework Core 1.0, 1,1 und 2.0
  Moderne Datenzugriffslösungen mit Entity Framework Core 1.1 und 2.0-Preview2
  Moderne Datenzugriffslösungen mit Entity Framework Core 1.x und 2.0
  Moderne Datenzugriffslösungen mit Entity Framework Core 1.x und 2.0
  Introducing Regular Expressions: JavaScript and TypeScript
  Introducing Web Development
  Introducing Bootstrap 4
  Programming Web Applications with Node, Express and Pug
  Einführung in TypeScript: Grundlagen der Sprache TypeScript 2
  Pug – Die Template-Engine für node.js
  Web-Programmierung mit Node, Express und Pug
  Windows PowerShell 5 – kurz & gut
  Moderne Datenzugriffslösungen mit Entity Framework Core 1.1
  Windows PowerShell 5.0 - Das Praxishandbuch
  PHP 7 und MySQL: Von den Grundlagen bis zur professionellen Programmierung
  Windows Scripting Lernen
  .NET Praxis - Tipps und Tricks für .NET und Visual Studio
  Grundlagen für Web-Entwickler: Protokolle, HTML und CSS
  Bootstrap 3 - Stile und Komponenten
  Bootstrap 4 - Stile und Komponenten
  Einführung in JavaScript: ECMAScript 5
  Einführung in node.js
  express – Middleware für node.js
  JADE – Die Template Engine für node.js
  Reguläre Ausdrücke in JavaScript
  Moderne Datenzugriffslösungen mit Entity Framework 6
  C++ Standardbibliothek
  AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript
  Microsoft SharePoint Server 2013 und SharePoint Foundation: Das umfassende Handbuch
  SQL Server 2014 für Professionals: Hochverfügbarkeit, Cloud-Szenarien, Backup/Restore, Monitoring & Performance
  Moderne Webanwendungen mit ASP.NET MVC und JavaScript
  Windows PowerShell 4.0 - Das Praxishandbuch
  JavaScript: Das umfassende Handbuch, inkl. HTML5, JavaScript-Frameworks, jQuery, OOP
  C++11 für Programmierer
  C++ kurz und gut
  Microsoft ASP.NET 4.5 - Entwicklerbuch
  Moderne Webanwendungen mit ASP.NET MVC
  Verteilte Systeme und Services mit .NET 4.5
  Scripting mit Windows PowerShell 3.0 - Der Workshop: Skript-Programmierung mit Windows PowerShell 3.0 vom Einsteiger bis zum Profi
  Windows 8 für Administratoren
  Windows 8.1 - Das Handbuch (27. November 2013)
  Windows Store Apps entwickeln mit C# und XAML - Crashkurs
  .NET 4.5 Update
  Windows Scripting Lernen
  WPF 4.5 und XAML
  Datenbankprogrammierung mit .NET 4.5
  C++11: Der Leitfaden für Programmierer zum neuen Standard
  Verteilte Systeme und Services mit .NET 4.0
  Microsoft ASP.NET 4.0 mit C# 2010 - Entwicklerbuch
  Agile Software Engineering with Visual Studio
  Datenbankprogrammierung mit .NET 4.0. Mit Visual Studio 2010 und SQL Server 2008 R2
  Microsoft SharePoint Server 2010 und SharePoint Foundation 2010
  Microsoft SQL Server 2008 R2 - Das Entwicklerbuch
  Microsoft Viusal C# 2010
  Office 2010 Programmierung mit VSTO und .NET 4.0: Word, Excel und Outlook erweitern und anpassen
  Programmieren mit dem ADO.NET Entity Framework
  .NET 4.0 Crashkurs
  Visual Basic 2010: Grundlagen, ADO.NET, Windows Presentation Foundation
  .NET 4.0 Update
  Windows PowerShell 2.0 - Das Praxishandbuch
  Windows 7 im Unternehmen
  Agile Muster und Methoden
  Ajax
  ASP.NET 4.0
  ASP.NET 4.0 mit Visual C# 2010
  JavaScript
  PHP 5-Migration
  Scripting mit Windows PowerShell 2.0 - Der Einsteiger-Workshop
  SQL Server 2008 R2: Das Programmierhandbuch. Inkl. ADO.NET 3.5, LINQ to Entities und LINQ to SQL
  Visual Basic 2010
  Windows PowerShell 2.0 - Crashkurs
  Windows Server 2008 R2
  Windows Scripting
  Windows Scripting Lernen
  Data Mining mit Microsoft SQL Server
  Windows 7 für Administratoren
  Microsoft ASP.NET 3.5 mit Visual Basic 2008 - Entwicklerbuch
  .NET 3.5
  Essential PowerShell
  .NET 3.5 Crashkurs
  Webanwendungen mit ASP.NET 3.5 und AJAX Crashkurs
 Alle unsere aktuellen Fachbücher  E-Book-Abo für ab 99 Euro im Jahr